<template>
  <div class="comnunitydisplay-container">
    <!-- 导航栏 -->
    <navbar></navbar>

    <main role="main">
      <section class="jumbotron text-center">
        <div class="container">
          <h1>{{suminfo.title}}</h1>
          <p class="lead text-muted">{{suminfo.desc}}</p>
          <!-- 弹窗 -->
          <div class="popwindow">
            <mt-popup v-model="popupVisible" modal="true" closeOnClickModal="false">
              <br />
              <span class="list-title">排名不分先后</span>
              <br />
              <span v-for="(item,index) in page_arrs" :key="index">
                {{item.id}}.{{item.title}}
                <br />
              </span>

              <span class="space"></span>
              <!-- 分页条 -->
              <nav aria-label="Page navigation example">
                <!-- <button class="btn btn-secondary" type="submit" @click="primaryPage">首页</button> -->
                <button class="pagebtn btn btn-info" type="submit" @click="prePage">上页</button>
                <button
                  class="pagebtn btn btn-default"
                  type="submit"
                >{{current_page}}/{{Math.ceil(comlist.length/pagesize)}}</button>
                <button class="pagebtn btn btn-info" type="submit" @click="nextPage">下页</button>
                <!-- <button class="btn btn-secondary" type="submit" @click="lastPage">尾页</button> -->
              </nav>
              <!-- 分页条结束 -->
            </mt-popup>
          </div>
          <p>
            <button class="btn btn-primary my-2" @click="popupVisible=!popupVisible">{{btntitle}}</button>
            <!-- <a href="#" class="btn btn-secondary my-2">社团列表</a> -->
          </p>
        </div>
      </section>

      <div class="album py-5 bg-light">
        <div class="container">
          <div class="row">
            <div class="col-md-4" v-for="item in cardinfo" :key="item.title">
              <div class="card mb-4 shadow-sm">
                <img :src="item.path" style="width:150px height:150px class='card-img-top'" />
                <div class="card-body">
                  <h3>{{item.title}}</h3>
                  <p class="card-text">
                    <span>{{item.desc}}</span>
                  </p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                      <button
                        type="button"
                        class="btn btn-sm btn-outline-secondary"
                        @click="details"
                      >详情</button>
                    </div>
                    <small class="text-muted">{{item.time}}</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <homefooter></homefooter>
    </footer>
  </div>
</template>


<script>
import navbar from "../subcomponents/NavBar.vue";
import homefooter from "../subcomponents/Footer.vue";

export default {
  data() {
    return {
      popupVisible: false,
      currentPage: 1, //当前页号
      pagesize: 10, //每页大小
      totalPage: Math.ceil(this.comlist.length / this.pagesize)
    };
  },
  computed: {
    /* indexes() {
      Math.ceil(this.comlist.length / this.pagesize);
    }, */
    //计算每一页要展示的数据
    page_arrs() {
      let { currentPage, pagesize } = this;
      return this.comlist.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    current_page() {
      return this.currentPage;
    }
  },
  methods: {
    primaryPage() {
      this.currentPage = 1;
    },
    prePage() {
      if (this.currentPage == 1) {
        return;
      }
      this.currentPage = this.currentPage - 1;
    },
    nextPage() {
      if (this.currentPage == Math.ceil(this.comlist.length / this.pagesize)) {
        return;
      }
      this.currentPage = this.currentPage + 1;
    },
    lastPage() {
      this.currentPage = Math.ceil(this.comlist.length / this.pagesize);
    },

    details() {
      this.$router.push({ path: "/developing" });
    }
  },
  props: ["cardinfo", "suminfo", "comlist", "btntitle"],
  components: {
    navbar,
    homefooter
  }
};
</script>

<style lang="scss" scoped>
header {
  padding-bottom: 57px;
  .bg-dark {
    background-color: #2891c8 !important;
  }
}
.jumbotron {
  .btn-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
  .btn-primary {
    color: #fff;
    background-color: #2891c8;
    border-color: #2891c8;
  }
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.jumbotron {
  .pagebtn {
    font-size: 12px;
  }
  .mint-popup {
    width: 500px;
    height: 338.91px;
    border-radius: 5px;
    text-align: center;
    nav {
      padding-left: 177px;
      text-align: center;
      position: fixed;
      bottom: 10px;
    }
    .list-title {
      font-size: 16px;
      font-weight: 500;
      color: #2891c8;
      // margin-left: 202px;
    }
    span {
      font-size: 14px;
      // margin-left: 210px;
    }
    .btn-info {
      color: #fff;
      background-color: #2891c8;
      border-color: #2891c8;
    }
    .btn-secondary:hover {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    .btn-info:hover {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
  }
}
.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron h1 {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}
.row {
  h3 {
    color: #2891c8;
    font-weight: 500;
  }
  span {
    text-align: justify;
    font-size: 14px;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .btn-outline-secondary:hover {
    color: #fff;
    background-color: #2891c8;
    border-color: #2891c8;
  }
}

footer {
  background-color: #f8f9fa;
}

footer p {
  margin-bottom: 0.25rem;
}
</style>

